<template>
  <div class="mail-register-page">
    <!-- 顶部导航 -->
    <header class="top-nav">
      <div class="nav-container">
        <div class="nav-left">
          <img
            src="@/assets/images/logo.png"
            alt="贵港文旅+"
            class="nav-logo"
          />
          <div class="brand-wrapper">
            <span class="brand-name">贵港文旅+</span>
            <span class="brand-pinyin">GUIGANGWENLV+</span>
          </div>
          <span class="divider">|</span>
          <span class="nav-title">你的专业文旅助手</span>
        </div>
        <div class="nav-right">
          <a href="/" class="nav-link">贵港文旅首页</a>
          <a href="#" class="nav-link">手机App下载</a>
          <a href="#" class="nav-link">电脑客户端下载</a>
          <a href="/merchant/apply" class="nav-link">商家入驻</a>
          <router-link to="/help/guide" class="nav-link">帮助</router-link>
          <a href="#" class="nav-link">反馈</a>
          <router-link to="/login" class="nav-link login-link"
            >去登录</router-link
          >
        </div>
      </div>
    </header>

    <!-- 主要内容区 -->
    <main class="main-content">
      <div class="register-container">
        <div class="register-box">
          <h2 class="register-title">注册账号</h2>
          <p class="register-subtitle">开启美好生活之旅</p>

          <el-form
            ref="registerFormRef"
            :model="form"
            :rules="rules"
            class="register-form"
          >
            <!-- 步骤1：基本信息 -->
            <div v-show="currentStep === 1" class="step-content">
              <el-form-item prop="username">
                <el-input
                  v-model="form.username"
                  placeholder="请设置用户名"
                  :prefix-icon="User"
                  clearable
                />
              </el-form-item>

              <el-form-item prop="phone">
                <el-input
                  v-model="form.phone"
                  placeholder="请输入手机号码"
                  :prefix-icon="Phone"
                  clearable
                />
              </el-form-item>

              <el-form-item prop="email">
                <el-input
                  v-model="form.email"
                  placeholder="请输入邮箱"
                  :prefix-icon="Message"
                  clearable
                />
              </el-form-item>
            </div>

            <!-- 步骤2：设置密码 -->
            <div v-show="currentStep === 2" class="step-content">
              <el-form-item prop="password">
                <el-input
                  v-model="form.password"
                  type="password"
                  placeholder="请设置密码"
                  :prefix-icon="Lock"
                  show-password
                />
                <div class="password-strength" v-if="form.password">
                  <div class="strength-indicators">
                    <div
                      v-for="(level, index) in strengthLevels"
                      :key="index"
                      class="strength-indicator"
                      :class="[
                        `strength-${level}`,
                        { active: passwordStrength >= index + 1 },
                      ]"
                    />
                  </div>
                  <span
                    class="strength-text"
                    :class="`text-${strengthLevels[passwordStrength - 1]}`"
                  >
                    密码强度: {{ strengthTexts[passwordStrength - 1] }}
                  </span>
                </div>
              </el-form-item>

              <el-form-item prop="confirmPassword">
                <el-input
                  v-model="form.confirmPassword"
                  type="password"
                  placeholder="请确认密码"
                  :prefix-icon="Lock"
                  show-password
                />
              </el-form-item>
            </div>

            <!-- 步骤3：验证身份 -->
            <div v-show="currentStep === 3" class="step-content">
              <div class="verify-type-selector">
                <div
                  class="verify-option"
                  :class="{ active: verifyType === 'phone', disabled: timer }"
                  @click="timer ? null : handleSelectVerifyType('phone')"
                >
                  <el-icon><Phone /></el-icon>
                  <span>手机号验证</span>
                  <span class="verify-value">{{ form.phone }}</span>
                </div>
                <div
                  class="verify-option"
                  :class="{ active: verifyType === 'email', disabled: timer }"
                  @click="timer ? null : handleSelectVerifyType('email')"
                >
                  <el-icon><Message /></el-icon>
                  <span>邮箱验证</span>
                  <span class="verify-value">{{ form.email }}</span>
                </div>
              </div>

              <el-form-item prop="verificationCode" class="mb-2">
                <div class="verification-code-input">
                  <input
                    v-for="(digit, index) in 6"
                    :key="index"
                    :ref="
                      (el) => {
                        if (el) codeInputs[index] = el;
                      }
                    "
                    v-model="verificationDigits[index]"
                    type="text"
                    maxlength="1"
                    class="code-digit"
                    @input="handleCodeInput(index)"
                    @keydown.delete="handleCodeDelete(index)"
                    @keydown.left="focusInput(index - 1)"
                    @keydown.right="focusInput(index + 1)"
                    :disabled="loading || !codeSent"
                  />
                </div>
                <div class="verification-actions">
                  <div class="verification-status">
                    <span v-if="loading" class="verification-pending">
                      <el-icon class="is-loading"><Loading /></el-icon> 
                      正在处理中，请稍候...
                    </span>
                    <span v-else-if="!verifyType" class="select-tip">
                      请点击上方选择验证方式
                    </span>
                    <span v-else-if="timer" class="countdown-tip">
                      {{ countdown }}秒后可重新发送验证码
                    </span>
                    <span v-else-if="codeSent" class="verification-tip">
                      验证码已发送至{{
                        verifyType === "phone" ? "手机" : "邮箱"
                      }}
                    </span>
                    <span v-else class="verification-pending">
                      <el-icon class="is-loading"><Loading /></el-icon> 
                      正在准备发送验证码...
                    </span>
                  </div>
                </div>
              </el-form-item>
            </div>

            <!-- 步骤控制按钮 -->
            <div class="step-actions mt-4">
              <el-button
                v-if="currentStep > 1 && currentStep < 3"
                @click="prevStep"
                class="prev-btn"
              >
                上一步
              </el-button>
              <el-button
                v-if="currentStep < 3"
                type="primary"
                class="next-btn"
                @click="nextStep"
              >
                下一步
              </el-button>
            </div>
          </el-form>

          <div class="terms-agreement">
            <el-tooltip
              content="请先阅读并同意服务条款和隐私政策"
              placement="top"
              :show-after="0"
              :hide-after="3000"
              :visible="showAgreementTip"
              popper-class="agreement-tooltip"
            >
              <div class="checkbox-wrapper">
                <el-checkbox
                  v-model="agreedToTerms"
                  class="terms-checkbox"
                  @change="handleAgreementChange"
                >
                  我已阅读并同意
                </el-checkbox>
              </div>
            </el-tooltip>
            <a
              href="#"
              class="terms-link"
              @click.prevent="showServiceAgreement = true"
              >《服务条款》</a
            >
            和
            <a
              href="#"
              class="terms-link"
              @click.prevent="showPrivacyAgreement = true"
              >《隐私政策》</a
            >
          </div>

          <div class="form-footer">
            <router-link to="/login" class="login-link"
              >已有账号？立即登录</router-link
            >
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="page-footer">
      <div class="footer-info">
        <span>贵港文旅版权所有 ©2024</span>
        <a href="#" class="footer-link">ICP备案 桂B2-20240101</a>
        <a href="#" class="footer-link">
          <img
            src="@/assets/images/police-badge.png"
            class="police-badge"
            alt="警徽"
          />
          桂公网安备 45010602006299号
        </a>
        <a href="#" class="footer-link">增值电信业务经营许可证 桂B2-20240101</a>
      </div>
    </footer>

    <AgreementDialog
      v-model="showServiceAgreement"
      type="service"
      @agree="showServiceAgreement = false"
    />

    <AgreementDialog
      v-model="showPrivacyAgreement"
      type="privacy"
      @agree="showPrivacyAgreement = false"
    />

    <!-- 添加验证对话框 -->
    <VerifyDialog
      v-model:visible="showVerifyDialog"
      @success="handleVerifySuccess"
      @cancel="handleVerifyCancel"
    />
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted, onUnmounted } from "vue";
import {
  User,
  Lock,
  Phone,
  Key,
  Message,
  InfoFilled,
  CircleCheck,
  CircleClose,
  ArrowLeft,
  ArrowRight,
  Loading,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import AgreementDialog from "@/components/merchantapply/AgreementDialog.vue";
import VerifyDialog from "@/components/auth/VerifyDialog.vue";
import {
  getPhoneVerificationCode,
  getEmailVerificationCode,
  register as registerAPI,
} from "@/api/auth";

const router = useRouter();
const registerFormRef = ref(null);
const loading = ref(false);
const timer = ref(null);
const countdown = ref(0);
const showServiceAgreement = ref(false);
const showPrivacyAgreement = ref(false);
const agreedToTerms = ref(false);
const currentStep = ref(1);
const verifyType = ref("");
const codeInputs = ref([]);
const verificationDigits = ref(["", "", "", "", "", ""]);
const codeSent = ref(false);
const showAgreementTip = ref(false);

// 滑块验证相关
const showVerifyDialog = ref(false);
const sliderVerified = ref(false);

const strengthLevels = ["weak", "weak", "medium", "strong"];
const strengthTexts = ["非常弱", "弱", "中", "强"];

const form = reactive({
  username: "",
  phone: "",
  email: "",
  password: "",
  confirmPassword: "",
  verificationCode: "",
});

// 表单验证规则
const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
  ],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号",
      trigger: "blur",
    },
  ],
  email: [
    { required: true, message: "请输入邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (!/[A-Za-z]/.test(value)) {
          callback(new Error("密码必须包含字母"));
        } else if (!/\d/.test(value)) {
          callback(new Error("密码必须包含数字"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  confirmPassword: [
    { required: true, message: "请确认密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== form.password) {
          callback(new Error("两次输入密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
  verificationCode: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { len: 6, message: "验证码长度应为6位", trigger: "blur" },
  ],
};

// 密码强度计算
const passwordStrength = computed(() => {
  const { password } = form;
  if (!password || currentStep.value !== 2) return 1; // 当密码为空或不在第二步时返回1

  let strength = 0;
  const rules = {
    length: { score: 2, test: () => password.length >= 8 },
    lowercase: { score: 1, test: () => /[a-z]/.test(password) },
    uppercase: { score: 1, test: () => /[A-Z]/.test(password) },
    numbers: { score: 1, test: () => /\d/.test(password) },
    symbols: { score: 2, test: () => /[!@#$%^&*(),.?":{}|<>]/.test(password) },
    middleNumbersSymbols: {
      score: 2,
      test: () => /[0-9!@#$%^&*(),.?":{}|<>]/.test(password.slice(1, -1)),
    },
    requirements: {
      score: 2,
      test: () => {
        let count = 0;
        if (/[A-Z]/.test(password)) count++;
        if (/[a-z]/.test(password)) count++;
        if (/[0-9]/.test(password)) count++;
        if (/[^A-Za-z0-9]/.test(password)) count++;
        return count >= 3;
      },
    },
  };

  // 计算总分
  Object.values(rules).forEach((rule) => {
    if (rule.test()) {
      strength += rule.score;
    }
  });

  // 额外规则：重复字符扣分
  const repeatingChars = password.match(/(.)\1{2,}/g);
  if (repeatingChars) {
    strength = Math.max(0, strength - repeatingChars.length);
  }

  // 转换为 1-4 的等级
  if (strength >= 9) return 4; // 强
  if (strength >= 6) return 3; // 中
  if (strength >= 3) return 2; // 弱
  return 1; // 非常弱
});

// 修改验证码选择方法
const handleSelectVerifyType = async (type) => {
  // 如果正在倒计时，不允许切换
  if (timer.value) {
    ElMessage.warning(`请等待${countdown.value}秒后再切换验证方式`);
    return;
  }

  // 如果选择的是当前类型且已发送验证码，不做任何操作
  if (type === verifyType.value && codeSent.value) {
    return;
  }

  try {
    // 验证对应的字段
    if (type === "phone") {
      await registerFormRef.value.validateField("phone");
    } else {
      await registerFormRef.value.validateField("email");
    }

    // 更新验证类型
    verifyType.value = type;
    // 重置验证码相关状态
    verificationDigits.value = ["", "", "", "", "", ""];
    form.verificationCode = "";
    codeSent.value = false;
    if (timer.value) {
      clearInterval(timer.value);
      timer.value = null;
    }

    // 检查协议同意状态
    if (!agreedToTerms.value) {
      showAgreementTip.value = true;
      ElMessage({
        message: "请先同意服务条款和隐私政策",
        type: "warning",
      });
      return;
    }

    // 自动发送验证码
    await handleSendCode();
  } catch (error) {
    ElMessage.error(error.message || "请先确保填写正确的联系方式");
  }
};

// 修改验证码输入处理
const handleCodeInput = async (index) => {
  const digit = verificationDigits.value[index];
  if (digit) {
    // 只允许输入数字
    if (!/^\d$/.test(digit)) {
      verificationDigits.value[index] = "";
      return;
    }
    // 自动跳转到下一个输入框
    if (index < 5) {
      focusInput(index + 1);
    } else {
      // 第六位输入完成后自动处理验证码
      form.verificationCode = verificationDigits.value.join("");
      // 短暂延迟以提供更好的用户体验
      setTimeout(async () => {
        await verifyCode();
      }, 300);
    }
  }
};

// 添加验证码输入框焦点控制方法
const focusInput = (index) => {
  if (index >= 0 && index < 6) {
    codeInputs.value[index]?.focus();
  }
};

// 添加删除键处理方法
const handleCodeDelete = (index) => {
  if (!verificationDigits.value[index] && index > 0) {
    verificationDigits.value[index - 1] = "";
    focusInput(index - 1);
  }
};

// 验证对话框处理函数
const handleVerifySuccess = () => {
  sliderVerified.value = true;
  // 验证成功后自动进入下一步
  currentStep.value++;
};

const handleVerifyCancel = () => {
  sliderVerified.value = false;
  ElMessage({
    message: "请完成人机验证才能继续",
    type: "warning",
  });
};

// 添加验证码验证方法
const verifyCode = async () => {
  try {
    if (form.verificationCode.length !== 6) return;

    loading.value = true;

    // 调用注册API而不是验证码验证API
    // 跳过验证码验证，直接注册
    await autoRegister();
  } catch (error) {
    ElMessage({
      message: "验证码错误，请重新输入",
      type: "error",
    });
    // 清空验证码输入
    verificationDigits.value = ["", "", "", "", "", ""];
    form.verificationCode = "";
    // 聚焦第一个输入框
    focusInput(0);
  } finally {
    loading.value = false;
  }
};

// 添加自动注册方法
const autoRegister = async () => {
  try {
    if (!agreedToTerms.value) {
      showAgreementTip.value = true;
      ElMessage({
        message: "请先同意服务条款和隐私政策",
        type: "warning",
      });
      return;
    }

    // 调用注册API，携带验证码，但不要标记为已验证
    // 让后端在注册时验证验证码，避免验证两次
    const registerData = {
      username: form.username,
      password: form.password,
      phone: form.phone,
      email: form.email,
      verifyType: verifyType.value,
      verificationCode: form.verificationCode
    };

    // 注册API会验证验证码
    await registerAPI(registerData);

    ElMessage({
      message: "注册成功",
      type: "success",
    });
    router.push("/login");
  } catch (error) {
    handleApiError(error);
  } finally {
    loading.value = false;
  }
};

// 修改发送验证码方法
const handleSendCode = async () => {
  try {
    if (!verifyType.value) return;

    // 如果是通过选择验证方式自动调用的，协议检查已经在 handleSelectVerifyType 中完成
    // 如果是用户手动触发的（如：重新发送），需要检查协议
    if (!codeSent.value && !agreedToTerms.value) {
      showAgreementTip.value = true;
      ElMessage({
        message: "请先同意服务条款和隐私政策",
        type: "warning",
      });
      return;
    }

    // 验证对应的字段
    if (verifyType.value === "phone") {
      await registerFormRef.value.validateField("phone");
    } else {
      await registerFormRef.value.validateField("email");
    }

    loading.value = true;

    // 调用发送验证码API
    if (verifyType.value === "phone") {
      await getPhoneVerificationCode(form.phone, "register");
    } else {
      await getEmailVerificationCode(form.email, "register");
    }

    codeSent.value = true;
    ElMessage({
      message: `验证码已发送至${verifyType.value === "phone" ? "手机" : "邮箱"}`,
      type: "success",
    });
    countdown.value = 60;
    timer.value = setInterval(() => {
      countdown.value--;
      if (countdown.value <= 0) {
        clearInterval(timer.value);
        timer.value = null;
      }
    }, 1000);
  } catch (error) {
    handleApiError(error);
  } finally {
    loading.value = false;
  }
};

// 错误处理函数
const handleApiError = (error) => {
  // 总是在控制台打印完整的技术性错误信息
  console.error('API Error:', error);
  
  // 给用户展示的消息应该很简洁，不包含技术细节
  let userMessage = "网络错误，请稍后重试";
  
  // 根据错误类型显示不同的用户友好消息
  if (error.name === 'NetworkError' || !navigator.onLine) {
    userMessage = "网络连接异常，请检查您的网络";
  } else if (error.response?.status === 429) {
    userMessage = "请求过于频繁，请稍后再试";
  } else if (error.message && !error.message.includes("status code")) {
    // 只有当错误消息不包含状态码等技术细节时，才将其作为用户消息
    userMessage = error.message;
  }
  
  // 展示用户友好的消息
  ElMessage({
    message: userMessage,
    type: "error"
  });
};

// 步骤控制
const validateStep = async (step) => {
  if (!registerFormRef.value) return false;

  try {
    const fields = {
      1: ["username", "phone", "email"],
      2: ["password", "confirmPassword"],
      3: [],  // 第三步不需要手动验证，因为验证码输入后会自动验证
    }[step];

    await Promise.all(
      fields.map((field) => registerFormRef.value.validateField(field)),
    );

    return true;
  } catch (error) {
    return false;
  }
};

const nextStep = async () => {
  const isValid = await validateStep(currentStep.value);
  if (isValid) {
    if (currentStep.value === 1) {
      currentStep.value++;
    } else if (currentStep.value === 2) {
      // 第二步完成后显示验证对话框
      showVerifyDialog.value = true;
    } else {
      currentStep.value++;
    }
  }
};

const prevStep = () => {
  if (currentStep.value > 1) {
    currentStep.value--;
  }
};

// 处理协议勾选变化
const handleAgreementChange = (val) => {
  if (val) {
    showAgreementTip.value = false;
  }
};

// 修改提交处理函数
const handleSubmit = async () => {
  if (!agreedToTerms.value) {
    showAgreementTip.value = true;
    return;
  }

  if (!registerFormRef.value) return;

  try {
    await registerFormRef.value.validate();

    // 验证验证码
    await verifyCode();
  } catch (error) {
    handleApiError(error);
  }
};

// 监听密码变化
watch(
  () => form.password,
  (newVal) => {
    // 只在第二步且存在 registerFormRef 时进行验证
    if (
      currentStep.value === 2 &&
      form.confirmPassword &&
      registerFormRef.value
    ) {
      registerFormRef.value.validateField("confirmPassword").catch(() => {
        // 忽略验证错误
      });
    }
  },
);

// 进入第三步时设置默认验证方式
watch(
  () => currentStep.value,
  (newStep) => {
    if (newStep === 3) {
      // 重置验证状态，但不自动选择验证方式
      verifyType.value = "";
      verificationDigits.value = ["", "", "", "", "", ""];
      form.verificationCode = "";
      
      // 不再自动发送验证码，等待用户选择验证方式
      
      if (timer.value) {
        clearInterval(timer.value);
        timer.value = null;
      }
    }

    // 重置表单验证状态
    if (registerFormRef.value) {
      registerFormRef.value.clearValidate();
    }
  },
);

// 组件卸载时清理定时器
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
});
</script>

<style lang="scss" scoped>
.mail-register-page {
  @apply min-h-screen flex flex-col relative;
  background: url("@/assets/images/register-bg.jpg") center/cover fixed
    no-repeat;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;

  &::before {
    content: "";
    @apply fixed inset-0 z-0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0) 64px,
      rgba(255, 255, 255, 0) calc(100% - 64px),
      rgba(255, 255, 255, 0.9) 100%
    );

    .dark & {
      background: linear-gradient(
        to bottom,
        rgba(17, 24, 39, 0.9) 0%,
        rgba(17, 24, 39, 0.4) 64px,
        rgba(17, 24, 39, 0.4) calc(100% - 64px),
        rgba(17, 24, 39, 0.9) 100%
      );
    }
    pointer-events: none;
  }

  .top-nav {
    @apply w-full fixed top-0 left-0 z-50;

    .nav-container {
      @apply max-w-7xl mx-auto h-16 flex items-center justify-between;
      padding-left: 16px;
      padding-right: 8px;

      .nav-left {
        @apply flex items-center;

        .nav-logo {
          @apply h-14 mr-2;

          .dark & {
            filter: brightness(1.2)
              drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
          }
        }

        .brand-wrapper {
          @apply flex flex-col justify-center;

          .brand-name {
            @apply text-2xl font-bold text-gray-800 dark:text-gray-100 leading-6;
          }

          .brand-pinyin {
            @apply text-[8px] text-gray-500 dark:text-gray-400 mt-0.5;
          }
        }

        .divider {
          @apply mx-3 text-gray-300 dark:text-gray-600 text-xl;
        }

        .nav-title {
          @apply text-gray-700 dark:text-gray-200 text-lg font-medium;
        }
      }

      .nav-right {
        @apply flex items-center;
        gap: 24px;

        .nav-link {
          @apply text-sm text-gray-600 dark:text-gray-300 hover:text-[#2e74e5] dark:hover:text-[#60a5fa] transition-colors;
        }
      }
    }
  }

  .main-content {
    @apply flex-1 flex items-center justify-center relative z-10;
    padding: 0;
    margin-top: 64px;
    overflow-y: auto;
    max-height: calc(100vh - 64px - 64px);

    .register-container {
      @apply w-[480px];

      .register-box {
        @apply bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm rounded-2xl shadow-xl dark:shadow-2xl p-8;

        .step-content {
          @apply mb-8;
          max-width: 380px;
          margin-left: auto;
          margin-right: auto;
        }

        .register-title {
          @apply text-2xl font-bold text-center mb-2;
          background: linear-gradient(to right, #2e74e5, #2361c5);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;

          .dark & {
            background: linear-gradient(to right, #60a5fa, #3b82f6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        .register-subtitle {
          @apply text-base text-gray-600 dark:text-gray-300 text-center mb-8;
        }

        .el-input {
          :deep(.el-input__wrapper) {
            @apply h-11 bg-white dark:bg-gray-800;
            border: 1px solid #d1d5db !important;
            box-shadow: none !important;
            border-radius: 1rem !important;

            &:hover {
              border-color: #9ca3af !important;
            }

            &.is-focus {
              border-color: #2e74e5 !important;
              box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1) !important;

              .dark & {
                border-color: #3b82f6 !important;
                box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2) !important;
              }
            }

            .el-input__inner {
              @apply text-base text-gray-900 dark:text-gray-100;
              &::placeholder {
                @apply text-gray-400 dark:text-gray-500;
              }
            }

            .el-input__prefix {
              @apply mr-2;
              .el-icon {
                @apply text-xl text-gray-400 dark:text-gray-500;
              }
            }
          }
        }

        .verify-type-selector {
          @apply flex gap-5 mb-8;

          .verify-option {
            @apply flex-1 p-5 rounded-xl border-2 border-gray-200 cursor-pointer
                   flex flex-col items-center gap-3 transition-all duration-300
                   hover:shadow-sm relative overflow-hidden;

            &::before {
              content: "";
              @apply absolute inset-0 bg-gradient-to-br from-blue-50 to-transparent opacity-0 transition-opacity duration-300;
            }

            .el-icon {
              @apply text-3xl text-gray-400 transition-colors duration-300;
            }

            span {
              @apply text-base text-gray-600 transition-colors duration-300;
            }

            .verify-value {
              @apply text-sm text-gray-400;
            }

            &:hover {
              @apply border-blue-200;

              &::before {
                @apply opacity-100;
              }

              .el-icon {
                @apply text-blue-500;
              }
            }

            &.active {
              @apply border-blue-500 shadow-sm;

              &::before {
                @apply opacity-100;
              }

              .el-icon {
                @apply text-blue-500;
              }

              span {
                @apply text-blue-500;
              }

              .verify-value {
                @apply text-blue-400;
              }
            }

            &.disabled {
              @apply opacity-50 cursor-not-allowed;
              
              &:hover {
                @apply border-gray-200;
                
                &::before {
                  @apply opacity-0;
                }
                
                .el-icon {
                  @apply text-gray-400;
                }
              }
            }
          }
        }

        .verification-code-input {
          @apply flex gap-4 justify-center mb-4;
          max-width: 380px;
          margin-left: auto;
          margin-right: auto;

          .code-digit {
            @apply w-14 h-14 rounded-lg border border-gray-200 dark:border-gray-700 text-center text-2xl
                   focus:border-blue-500 dark:focus:border-blue-400 focus:outline-none transition-all duration-300
                   bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm shadow-sm text-gray-900 dark:text-gray-100;

            &:focus {
              @apply shadow-md ring-2 ring-blue-100 dark:ring-blue-900;
            }

            &:hover {
              @apply border-gray-300 dark:border-gray-600 shadow-md;
            }
          }
        }

        .verification-actions {
          @apply flex flex-col items-center gap-2;
          max-width: 380px;
          margin-left: auto;
          margin-right: auto;

          .verification-status {
            @apply text-base text-center py-2 px-6 rounded-full bg-gray-50 dark:bg-gray-800 mb-0;

            .select-tip {
              @apply text-gray-400 dark:text-gray-500;
            }

            .countdown-tip {
              @apply text-orange-500 dark:text-orange-400 font-medium;
            }

            .verification-tip {
              @apply text-green-500 dark:text-green-400;
            }

            .verification-pending {
              @apply text-gray-500 dark:text-gray-400;
            }
          }
        }

        .password-strength {
          @apply flex items-center gap-3 mt-2;

          .strength-indicators {
            @apply flex gap-2;

            .strength-indicator {
              @apply w-12 h-1.5 rounded-full transition-all duration-300;
              background-color: #e5e7eb;

              &.active {
                &.strength-weak {
                  @apply bg-red-500;
                }
                &.strength-medium {
                  @apply bg-yellow-500;
                }
                &.strength-strong {
                  @apply bg-green-500;
                }
              }
            }
          }

          .strength-text {
            @apply text-sm;

            &.text-weak {
              @apply text-red-500;
            }
            &.text-medium {
              @apply text-yellow-500;
            }
            &.text-strong {
              @apply text-green-500;
            }
          }
        }

        .step-actions {
          @apply flex gap-5;
          max-width: 380px;
          margin-left: auto;
          margin-right: auto;

          .prev-btn {
            @apply flex-1 h-11 text-base rounded-2xl border-2 border-gray-200 dark:border-gray-700 
                   text-gray-700 dark:text-gray-300
                   hover:border-gray-300 dark:hover:border-gray-600 
                   hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-300;
          }

          .next-btn,
          .submit-btn {
            @apply flex-1 h-11 text-base rounded-2xl shadow-sm;
            background: linear-gradient(to right, #2e74e5, #2361c5);
            display: block;
            margin-left: auto;
            margin-right: auto;

            .dark & {
              background: linear-gradient(to right, #3b82f6, #2563eb);
            }

            &:hover {
              background: linear-gradient(to right, #2361c5, #1d4ed8);

              .dark & {
                background: linear-gradient(to right, #60a5fa, #3b82f6);
              }
            }
          }
        }

        .terms-agreement {
          @apply text-center text-sm text-gray-500 dark:text-gray-400 mt-6 flex items-center justify-center gap-1;

          .checkbox-wrapper {
            @apply inline-flex items-center relative;
          }

          .terms-checkbox {
            :deep(.el-checkbox__inner) {
              @apply w-4 h-4 rounded border-2 border-gray-300 dark:border-gray-600;

              &::after {
                @apply h-2 left-[5px] top-[2px];
              }
            }

            &:deep(.el-checkbox__label) {
              @apply text-sm text-gray-500 dark:text-gray-400;
            }

            &:deep(.is-checked) {
              .el-checkbox__inner {
                @apply border-[#2e74e5] bg-[#2e74e5] dark:border-[#60a5fa] dark:bg-[#60a5fa];
              }
              .el-checkbox__label {
                @apply text-[#2e74e5] dark:text-[#60a5fa];
              }
            }
          }

          .terms-link {
            @apply text-[#2e74e5] dark:text-[#60a5fa] hover:text-[#2361c5] dark:hover:text-[#3b82f6] font-medium;
          }
        }

        .form-footer {
          @apply flex justify-center mt-5;

          .login-link {
            @apply text-base text-[#2e74e5] dark:text-[#60a5fa] hover:text-[#2361c5] dark:hover:text-[#3b82f6] font-medium;
          }
        }

        .slider-captcha-section {
          @apply mt-8 mb-4;

          .section-title {
            @apply flex items-center justify-between mb-4;

            .title-text {
              @apply text-gray-700 dark:text-gray-300 font-medium;
            }

            .title-badge {
              @apply flex items-center gap-1 text-sm rounded-full py-1 px-3;

              &.pending {
                @apply bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400;
              }

              &.success {
                @apply bg-green-50 dark:bg-green-900/30 text-green-500 dark:text-green-400;
              }

              .el-icon {
                @apply text-base;
              }
            }
          }
        }
      }
    }
  }

  .page-footer {
    @apply w-full py-6 text-center fixed bottom-0 left-0 z-50;
    background: transparent;

    .footer-info {
      @apply text-sm text-gray-500 dark:text-gray-400 space-x-4 relative z-10;

      .footer-link {
        @apply text-gray-500 dark:text-gray-400 hover:text-[#2e74e5] dark:hover:text-[#60a5fa] transition-colors;
      }

      .police-badge {
        @apply h-4 inline-block align-middle mr-1;

        .dark & {
          filter: brightness(0.8) contrast(1.2);
        }
      }
    }
  }
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .mail-register-page {
    .top-nav {
      .nav-container {
        .nav-right {
          display: none;
        }
      }
    }

    .main-content {
      @apply px-4;
      margin-top: 0;

      .register-container {
        @apply w-full mx-4;
        margin-left: auto;

        .register-box {
          @apply p-6;
        }
      }
    }
  }
}

:deep(.agreement-tooltip) {
  @apply bg-red-50 border border-red-100;

  .el-tooltip__content {
    @apply text-red-500 text-sm px-3 py-1.5;
  }
}

.verification-tip-box {
  @apply flex items-center p-4 mb-4 rounded-lg bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400;
  
  .tip-icon {
    @apply mr-3 text-lg;
  }
  
  .tip-text {
    @apply text-sm font-medium;
  }
}
</style>
